<template >
	<view>
		<!-- 没有东西 -->
		<view class="canui-kong" v-if="cartBooks.length==0">
		    <view class="bg-yellow padding  shadow-blur canui-kong-icon flex justify-center align-center">
		        <text class="cuIcon-cart text-white"></text>
		    </view>
				 
		    <view class="text-lg  flex justify-center align-center">
		        <text class="text-grey">此处空空如也~</text>
		    </view>
		</view>
		<view class="cu-list menu menu-avatar goods-list">
			<view class="animation-fade" style="pointer-events: auto;">
				<view class="cu-card no-card">
					<view class=" shadow  solids-bottom cu-item cf content padding-right-sm" :key="index" v-for="(item,index) in cartBooks">
						<!-- 左边 -->
						<view class="fl flex " style="width: fit-content;">
							<!-- 复选按钮 -->
							<view class="cu-form-group" style="width: 80rpx;" @click.stop="">
								<checkbox-group @change="handleChange(index)">
									<checkbox class='round yellow' :class="item.checked?'checked':''" :checked="item.checked" :value="index"></checkbox>
								</checkbox-group>
							</view>	
							<!-- 书本图片 -->
							<view class="image padding">
								<image style="width: 130rpx;height: 200rpx;" :src="item.img"></image>
							</view>
		
						</view>
		
						<!-- 右边 -->
						<view class="">
							<!-- 右边的上面 -->
							<view style="height: 170rpx;" class=" margin-top flex justify-between ">
								<view>
									<view class="text-black" style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp:2;overflow: hidden;text-overflow: ellipsis;">
										<text>{{item.title}}</text>
									</view>
									<view class="text-gray text-sm">{{item.author}}</view>
								</view>
		
								<text @click.stop="deleteItem(index)" class="margin-right-sm text-grey text-lg cuIcon-close "></text>
							</view>
							
							<!-- 右边的下面 -->
				
							<view class="flex justify-end">
								<view style="" class=" flex justify-between  align-center" @click.stop="">	
									<view class="text-price margin-right text-black text-lg">{{item.price}}</view>
									<view class="padding-bottom-sm ">	
										<uni-number-box :min="1" :max="10" @change="bindChange(index,$event)" class="" :value="item.num"></uni-number-box>
									</view>
									<view class="margin-left-sm cu-tag radius line-mauve ">4折</view>
								</view>
							</view>
							
						</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {
		handleRequest
	} from '../../request/handleRequest.js';
	
	import {mapState,mapMutations} from 'vuex';
	import {handleSearch} from '../../request/handleReq.js';
	var _self;
	export default {
		computed:mapState(['hasLogin']),
		
		data() {
			return {
				// newBook:{},
				// books:[],	
				update: true,
				type: null,
				flag:false,
				show_input:false
			};
		},
		props:{
			cartBooks:{
				type:Array,
				value:[]
			},
			// cartType:{
			// 	type:Number,
			// 	value:0				
			// },
			// newBook:{
			// 	type:Object,
			// 	value:{}
			// }
		},
		mounted(){
			
		},
		onLoad() {
			_self = this;				
		},
		onShow() {
			// this.setCart(this.cartBooks);
		},
		methods:{
			...mapMutations(['forceLogin']),
			
			handleBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			
			bindChange(index,e){
				this.cartBooks[index].num=e,
				this.setCart(this.cartBooks)
			},
			// 跳转到详情页面
			handleToDetail(e) {
				this.booksNum = this.cartBooks[e].booksElement;
				// console.log(this.booksNum);
				uni.navigateTo({
					url: "../book_details/book_details?book_index=" + this.booksNum
				});
			},			
			// 复选框
			handleChange(index) {
				// console.log(index);
				this.cartBooks[index].checked = !this.cartBooks[index].checked;
				this.setCart(this.cartBooks);
			
			},
			// 设置购物车状态同时重新计算底部的选中数目,总价,全选，最后重新存回缓存
			setCart(cartBooks) {
				// this.allChoosed=this.saleBooks.length?this.saleBooks.every(v=>v.checked):false;
				let choosed = true;
				let sum = 0;
				let count = 0;
				cartBooks.forEach(v => {
					if (v.checked) {
						sum += v.price*v.num;
						count+=Number(v.num);
					} else {
						choosed = false;
					}
				})
				// 如果salebooks为空的话就不会循环
				choosed = cartBooks != 0 ? choosed : false;
				this.flag=cartBooks.length==0?true:false;
				let cartInfo = {
					cartBooks: cartBooks,
					allChoosed: choosed,
					totPrice: sum,
					totCount: count	
				}
				this.$emit('cartChange',cartInfo);
				// TODO:上传新的租借购物车
				// uni.setStorageSync("cart", this.cartBooks);
			},
			
			
			// 大图预览
			handlePreview() {
				uni.previewImage({
					urls: new Array("https://ae01.alicdn.com/kf/Hdbdc7a4fb0ea4e1695c9b337831420a0t.jpg")
				})
			},
			deleteItem(e){
				this.$emit('deleteBook',e);
			}		
				
		}
	}
	
</script>

<style>

</style>
